<template>
  <div>
    <div class="check-text">
      共计审核
      <span class="check-text-count">{{
        data.length
      }}</span>
      次
    </div>
    <div class="behavior">
      <el-scrollbar>
        <div
          v-for="(item, index) in data"
          :key="index"
          class="behavior-item"
        >
          <div class="behavior-item-time">
            {{ item.checkTime }}
          </div>
          <div class="line">
            <div
              class="behavior-item-line"
              v-if="index !== 0"
            ></div>
            <div class="behavior-item-circle"></div>
          </div>

          <div>
            <div class="behavior-item-result">
              审核结果:
              <span
                :style="{
                  color:
                    item[status] == passKey
                      ? '#00CA6D'
                      : '#F9801C'
                }"
              >
                {{
                  item[status] == passKey ? '通过' : '退回'
                }}
              </span>
            </div>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              :content="item[opinion]"
              placement="top"
            > -->
            <div class="behavior-item-advice">
              审核意见: {{ item[opinion] }}
            </div>
            <!-- </el-tooltip> -->
            <div class="behavior-item-user">
              审核人员：{{ item[user] }}
            </div>
            <div
              class="behavior-item-user"
              v-if="item[dept]"
            >
              审核部门：{{ item[dept] }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shenheContent',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    user: {
      type: String,
      default: 'checkUserName'
    },
    dept: {
      type: String,
      default: 'departName'
    },
    opinion: {
      type: String,
      default: 'checkOpinion'
    },
    status: {
      type: String,
      default: 'checkStatus'
    },
    passKey: {
      type: [String, Number],
      default: 2
    }
  },
  data() {
    return {}
  },
  mounted() {
    console.log('this.data')
    console.log('this.data', this.data, this.passKey)
  }
}
</script>

<style lang="scss" scoped>
.check-text {
  font-size: 14px;

  &-count {
    color: #00baff;
  }
}

.behavior {
  border-top: 1px solid #eeeff5;
  // border-bottom: 1px solid #eeeff5;
  padding: 20px 0px;
  max-height: 550px;
  overflow: scroll;
  font-size: 14px;

  &-item {
    display: flex;
    // align-items: center;
    font-size: 14px;
    font-family: PingFang SC;
    margin-left: 30px;
    margin-bottom: 10px;

    .line {
      width: 9px;
      text-align: center;
      margin-right: 30px;
    }

    &-circle {
      margin-right: 24px !important;
      width: 10px;
      height: 10px;
      background: #ebf1f8;
      border-radius: 50%;
      // margin-top: -5px;
    }

    &-line {
      width: 1px;
      margin-left: 4px !important;
      margin-top: -300px !important;
      height: 300px;
      background: #e1e9f4;
    }

    &-time {
      font-weight: 500;
      padding-right: 20px;
      width: 200px;
      color: #010101;
    }

    &-result,
    &-advice,
    &-user {
      font-weight: 500;
      padding-right: 20px;
      width: 300px;
      color: #010101;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre-wrap;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
    }

    &-advice,
    &-user {
      font-size: 14px;
      font-weight: 400;
      color: #4c565c;
      margin-top: 5px;
    }

    // &-behavior {
    //   font-weight: 400;
    //   color: #505967;
    //   height: 50px;
    //   padding-left: 20px;
    //   width: 75%;
    //   line-height: 50px;
    // }
  }
}
</style>
